<template>
  <div class="c-bg-white">
    <div :class="lecturerInfo.desc ? '' : 'c-pb40'" class="c-pt40 c-p c-ph24 c-bg-white c-pb24 c-bd-b20-f5 c-br-bl20 c-br-br20" :style="'background-image: linear-gradient(180deg, rgba(' + rgbColor + ',0.3) 0%, rgba(255, 255, 255, 0.3) 35%);'">
      <img :src="$addXossFilter(lecturerInfo.avatar, require('@/assets/defult_head.png'))" class="c-ww120 c-hh120 c-brp50 c-m-0auto c-bd2-white" />
      <div class="c-fs28 c-fw600 c-fc-xblack c-textAlign-c c-text-ellipsis1 c-mt20">{{lecturerInfo.name}}</div>
      <div class="c-fs22 c-fc-gray c-textAlign-c c-text-ellipsis2 c-mt12">{{lecturerInfo.title}}</div>
      <div v-if="lecturerInfo.desc" class="c-bg-fa c-ph24 c-pv8 c-fs24 c-fc-xblack c-br20 c-mt20 c-p">
        <div :class="!isExpand ? 'c-maxh146 c-text-hidden' : ''" class="c-lh48">
          <span id="descText" class="c-inlineblack c-ws-pw c-wb-ba">{{lecturerInfo.desc}}<span v-if="showMoreBtn && isExpand" @click="isExpand = false" class="c-fs24 theme-fc c-pl16">收起</span></span>
          <span v-if="showMoreBtn && !isExpand" @click="isExpand = true" class="c-fs24 theme-fc c-pa c-p-b10 c-p-r24 c-pl24 bg-expand">展开</span>
        </div>
      </div>
      <div v-if="lecturerInfo.answerId && lecturerInfo.ltAnswerStatus == 1 && lecturerInfo.isAnswererSelf == 0" @click="goAskQuestion(lecturerInfo.answerId)" class="c-fs22 c-fc-white c-ww88 c-hh48 c-flex-row c-flex-center c-br-tl24 c-br-bl24 theme-bg c-pa c-p-r0 c-p-t80">提问</div>
    </div>
    <div class="c-bg-white c-ph24 c-pt36 c-pb40 c-mt20 c-br-tl20 c-br-tr20">
      <div class="c-fs28 c-fc-xblack c-fw600">主讲课程<span v-if="lecturerProds && lecturerProds.length > 0">（{{lecturerProds.length}}）</span></div>
      <div v-for="(item, index) in lecturerProds" :key="index" @click="goProdDetail(item)" class="c-flex-row c-mt40">
        <div class="c-ww180 c-hh120">
          <div class="c-w100 c-maxh120 c-text-hidden c-p c-br10">
            <img class="c-w100 c-br10" :src="$addXossFilter(item.cover, require('@/assets/defult270.png'))" alt="">
            <div class="c-fs16 c-fc-white c-ph8 c-br24 c-pa c-p-b6 c-p-r6 bg-pt">{{item.prodType == 5 ? (item.childType == 0 ? '视频' : item.childType == 1 ? '音频' : '图文') : prodTypes[item.prodType]}}</div>
          </div>
        </div>
        <div class="c-w0 c-flex-grow1 c-flex-column c-justify-sb c-ml20">
          <div class="c-fs24 c-fc-xblack c-text-ellipsis2">{{item.name}}</div>
          <div class="c-flex-row c-justify-sb">
            <template v-if="item.isSaleOnly != 1 && item.isSaleTogether == 1">
              <div class="c-fs26 c-fc-xmlred">关联售卖</div>
            </template>
            <template v-else>
              <div class="c-fs26 c-fc-xmlred"><span v-if="Number(item.price) != 0" class="c-fs20">{{'￥' | iosPriceFilter}}</span>{{item.payType | priceValueFilter(item.price, item.prodType)}}</div>
            </template>
            <div v-if="enableShowModuleView == 1 || !(enableHiddenModules && enableHiddenModules.includes(item.prodType))" class="c-fs20 c-fc-gray">{{item.virtualPlays + item.plays}}人观看</div>
          </div>
        </div>
      </div>
      <loading-status-tem :pt20="true" :noData="!lecturerProds || lecturerProds.length == 0" :noDataText="'暂无相关课程'"></loading-status-tem>
    </div>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js"
import { goDetails } from "@/utils/goDetails.js"
import LoadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
export default {
  name: "LecturerDetail",
  components: {
    LoadingStatusTem
  },
  data() {
    return {
      lecturerId: '',
      mb7Color: localStorage.getItem("mb7ThemeColor") || "#ff8831",
      rgbColor: '',
      isExpand: false,
      showMoreBtn: false,
      lecturerProds: [],
      prodTypes: global.prodMapType,
      lecturerInfo: '',
      courseId: 0,
      enableShowModuleView: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableShowModuleView : 1,
      enableHiddenModules: localStorage.getItem("cfg") ? JSON.parse(localStorage.getItem("cfg")).enableHiddenModules : [],
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    checkNeedExpand() {
      setTimeout(() => {
        let bWidth = document.getElementById('app').clientWidth;
        let threeLineH = (bWidth / 16) * 1.2 * 3;
        let descTextH = document.getElementById('descText') ? document.getElementById('descText').clientHeight : 0;
        if (descTextH > threeLineH + 10) {
          this.showMoreBtn = true;
        }
      }, 500);
    },
    getLecturerDetail() {
      utilJs.getMethod(`${global.apiurl}common/lecturerProds?lecturerId=${this.lecturerId}`, res => {
        this.lecturerInfo = res;
        this.lecturerProds = res.courses ? res.courses : [];
        this.$nextTick(() => {
          this.checkNeedExpand();
        })
        this.wechatShare();
      });
    },
    goAskQuestion(answerId) {
      this.$routerGo(this, "push", {
        path: "/homePage/qa/questionDetail",
        query: {
          answerId: answerId,
          courseId: this.courseId,
          src: 2,
        }
      })
    },
    goProdDetail(prodItem) {
      goDetails(this, prodItem.prodType, prodItem.prodId, {}, prodItem.childType);
    },
    //分享
    wechatShare: function () {
      let title = this.lecturerInfo.name;
      let shareImg = this.lecturerInfo.avatar;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?lecturerId=${this.lecturerId}&courseId=${this.courseId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.lecturerInfo.desc;
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      let title = this.lecturerInfo.name;
      let shareImg = this.lecturerInfo.avatar;
      let shareUrl = `${window.location.href.split("#")[0]}#${this.$route.path}?lecturerId=${this.lecturerId}&courseId=${this.courseId}&refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = this.lecturerInfo.desc;
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    }
  },
  activated() {
    setDocumentTitle("讲师主页");// eslint-disable-line
    this.lecturerId = this.$route.query.lecturerId || '';
    this.courseId = this.$route.query.courseId || 0;
    this.rgbColor = utilJs.hexToRgb(this.mb7Color);
    this.isExpand = false;
    this.showMoreBtn = false;
    this.lecturerProds = [];
    this.lecturerInfo = '';
    this.getLecturerDetail();
  },
  deactivated() {

  }
};
</script>
<style scoped>
.bg-expand {
  background-image: linear-gradient(90deg, rgba(250, 251, 252, 0.3) 0%, rgba(250, 251, 252, 1) 35%);
}
.bg-pt{
  background: rgba(0, 0, 0, 0.5)
}
.c-maxh146{
  max-height: 3.65rem;
}
</style>


